<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <!-- 顶部导航栏 -->
  <header>
    <img alt="logo" class="logo" src="@/assets/logo.svg" width="30" height="30" />
    <h>文献分析与选题建议系统</h>
  </header>
  <nav>
    <hr>
    <RouterLink to="/" class="router-link">首页</RouterLink>
    <RouterLink to="/analysis" class="router-link">文献分析</RouterLink>
    <RouterLink to="/proposal" class="router-link">选题建议</RouterLink>
    <RouterLink to="/readme" class="router-link">项目说明</RouterLink>
    <hr>
  </nav>
  <RouterView />

  <!-- 底部版权信息 -->
  <footer>
    <p>© 2025 文献分析与选题建议系统</p>
  </footer>
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  float: left;
  display: block;
  margin: 0;
}

header h {
  float: left;
  margin-left: 1rem;
  font-size: 20px;
  font-weight: bold;
  color: var(--color-text);
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 3rem;
}

nav hr {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

nav a {
  display: inline-block;
  font-size: 16px;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a.router-link-active {
  color: var(--color-text);
}

footer {
  text-align: center;
  line-height: 5rem;
  font-size: 12px;
  color: var(--color-text);
}

</style>
